<template>
    <div style="margin-left: 35%;width: 90vw">
        <div class="upLoat">
            <!--<a href="javascript:;" class="file">上传图片<input type="file" :accept="typeArr" @change="upload($event)">-->
            <!--</a>-->
            <!--<img :src="picurl" alt="">-->
        </div>
        <div>
            <el-form label-position="top" label-width="100px" class="demo-ruleForm">
                <el-form-item label="商品名称：">
                    <el-select style="width: 21vw" v-model="id" filterable placeholder="请选择"
                               @change="getpic">
                        <el-option
                                v-for="item in product"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="商品标题图片上传：">
                    <a href="javascript:;" class="file">上传图片<input type="file" :accept="typeArr"
                                                                   @change="upload1($event)">
                    </a>
                    <img style="height: 100px;width: 100px;margin-left: 10vw" :src="titlepicurl">

                    <!--<el-upload-->
                    <!--ref="upload1($event)"-->
                    <!--action="#"-->
                    <!--list-type="picture-card"-->
                    <!--:limit="1"-->
                    <!--:show-file-list="true"-->
                    <!--:file-list="titlepicurl"-->
                    <!--:on-preview="handlePictureCardPreview1"-->
                    <!--:on-remove="handleRemove">-->
                    <!--<i class="el-icon-plus"></i>-->
                    <!--</el-upload>-->
                    <!--<el-dialog :visible.sync="dialogVisible1" size="tiny">-->
                    <!--<img width="100%" :src="titlepicurl" alt="">-->
                    <!--</el-dialog>-->
                </el-form-item>

                <el-form-item label="商品详情图片上传：">
                    <a href="javascript:;" class="file">上传图片<input type="file" :accept="typeArr"
                                                                   @change="upload2($event)">
                    </a>
                    <img style="height: 100px;width: 100px;margin-left: 10vw" :src="picurl">

                    <!--<el-upload-->
                    <!--ref="upload2($event)"-->
                    <!--action="#"-->
                    <!--list-type="picture-card"-->
                    <!--:on-preview="handlePictureCardPreview2"-->
                    <!--:on-remove="handleRemove">-->
                    <!--<i class="el-icon-plus"></i>-->
                    <!--</el-upload>-->
                    <!--<el-dialog :visible.sync="dialogVisible2" size="tiny">-->
                    <!--<img width="100%" :src="picurl" alt="">-->
                    <!--</el-dialog>-->
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
    export default {
        props: ['data', 'typeArr', 'size'],
        data() {
            return {
                client: '',
                fileSize: 1000000,
                storeAs: '',
                product: [
                    {
                        id: '1',
                        name: '2233'
                    },
                    {
                        id: '2',
                        name: 'miku'
                    }
                ],
                id: '',
                titlepicurl: '',
                dialogVisible1: false,
                dialogVisible2: false,
                picurl: '',
                pic: {
                    userid: '',
                    commoditytitleid: '',
                    commodityid: '',
                    path: ''
                },

            }
        },
        beforeRouteEnter(to, from, next) {
            next(vm => {
                //在此处vm表示vue组件对象
                vm.loadDataP();
            });

        },
        created() {
            if (this.size) {
                this.fileSize = this.size;
            }
            this.client = new OSS.Wrapper({
                region: 'oss-cn-beijing',
                secure: true,
                accessKeyId: 'LTAIEoxh8ELxVKsZ',
                /*这两者到阿里云控制台获得*/
                accessKeySecret: '0FDENm0c37Jk1W9BZoMoN5ly7MCI4O',
                bucket: 'gdtc-picture' /*装图片的桶名*/
            });
        }, methods: {
            /**上传图片**/
            upload1: function (event) {
                this.storeAs = '/commoditytitle/';
                this.pic.commoditytitleid = this.id;
                var file = event.target.files[0];
                var type = file.name.split('.')[1];
                this.storeAs += this.getUuid() + '.' + type;
                var boolean = true;
                if (file.size > this.fileSize) {
                    this.$message('亲,图片不能超过!' + this.fileSize / 1000 + 'kb');
                    return false;
                }
                if (this.typeArr && this.typeArr.indexOf(type) > 0) {
                    boolean = false;
                }
                this.client.multipartUpload(this.storeAs, file)
                    .then(result => {
                        this.titlepicurl = 'https://' + result.bucket + '.oss-cn-beijing.aliyuncs.com' + result.name;
                        this.pic.path = 'https://' + result.bucket + '.oss-cn-beijing.aliyuncs.com' + result.name;
                        setTimeout(() => {
                            this.axios.post("/insertPicd", this.pic)
                                .then((response) => {
                                    if (response.data == 1) {
                                        this.$message({
                                            message: '添加成功',
                                            type: 'success'
                                        });
                                    } else {
                                        this.$message.error('添加失败');
                                    }
                                })
                        }, 1000);
                        setTimeout(() => {
                            this.pic.commoditytitleid = '';
                            this.pic.commodityid = '';
                            this.storeAs = '';
                        }, 2000);

                    }).catch(err => {
                    this.$message.error("Error:" + err);
                });

            },
            upload2: function (event) {
                this.storeAs = '/commodity/';
                this.pic.commodityid = this.id;
                var file = event.target.files[0];
                var type = file.name.split('.')[1];
                this.storeAs += this.getUuid() + '.' + type;
                var boolean = true;
                if (file.size > this.fileSize) {
                    this.$message('亲,图片不能超过!' + this.fileSize / 1000 + 'kb');
                    return false;
                }
                if (this.typeArr && this.typeArr.indexOf(type) > 0) {
                    boolean = false;
                }
                this.client.multipartUpload(this.storeAs, file)
                    .then(result => {
                        this.picurl = 'https://' + result.bucket + '.oss-cn-beijing.aliyuncs.com' + result.name;
                        this.pic.path = 'https://' + result.bucket + '.oss-cn-beijing.aliyuncs.com' + result.name;

                        setTimeout(() => {
                            this.axios.post("/insertPicd", this.pic)
                                .then((response) => {
                                    if (response.data == 1) {
                                        this.$message({
                                            message: '添加成功',
                                            type: 'success'
                                        });
                                    } else {
                                        this.$message.error('添加失败');
                                    }
                                })
                        }, 1000);

                        setTimeout(() => {
                            this.pic.commoditytitleid = '';
                            this.pic.commodityid = '';
                            this.storeAs = '';
                        }, 2000);
                    }).catch(err => {
                    this.$message.error("Error:" + err);
                });

            },
            getpic: function () {
                // this.axios.post("/getPic", {commoditytitleid: this.id}
                // )
                //     .then((response) => {
                //         this.titlepicurl = response.data;
                //     })
                //
                // this.axios.post("/getPic", {commodityid: this.id}
                // )
                //     .then((response) => {
                //         this.picurl = response.data;
                //     })
            },
            loadDataP: function () {
                this.axios.get("/getAllCom", {
                    params: {
                        storeid: 1
                    }
                })
                    .then((response) => {
                        this.product = response.data;
                    })
            },
            getUuid: function () {
                var len = 32; //32长度
                var radix = 16; //16进制
                var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
                var uuid = [],
                    i;
                radix = radix || chars.length;
                if (len) {
                    for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
                } else {
                    var r;
                    uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
                    uuid[14] = '4';
                    for (i = 0; i < 36; i++) {
                        if (!uuid[i]) {
                            r = 0 | Math.random() * 16;
                            uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
                        }
                    }
                }
                return uuid.join('');
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview1(file) {
                this.titlepicurl = file.url;
                this.dialogVisible1 = true;
            },
            handlePictureCardPreview2(file) {
                this.picurl = file.url;
                this.dialogVisible2 = true;
            }


        }
    }
</script>
<style>

    .file {
        position: relative;
        left: .26rem;
        top: .2rem;
        display: inline-block;
        background: #32d582;
        border: 1px solid #99D3F5;
        border-radius: 4px;
        padding: 4px 12px;
        overflow: hidden;
        color: white;
        text-decoration: none;
        text-indent: 0;
        line-height: 20px;
    }

    .file input {
        position: absolute;
        font-size: 100px;
        right: 0;
        top: 0;
        opacity: 0;
    }

</style>